<template>
  <s-page custom-class="Index-Page">
    <view class="header">
      <s-image custom-class="logo" src="/static/imgs/logo.png" width="64" height="64" />
      <view class="name">s-ui</view>
      <view class="version">V1.4.0</view>
    </view>

    <view class="desc">轻量、可靠的移动端 uni-app 组件库</view>

    <view v-for="(item, index) of list" :key="index" class="nav">
      <view class="nav__title">{{ item.title }}</view>
      <view class="nav__group">
        <view
          v-for="(page, listIndex) of item.pages" :key="listIndex" class="nav__block"
          @click="jumpTo('/' + item.root + '/' + page.path)"
        >
          <view class="nav__block__title">{{ page.style.navigationBarTitleText }}</view>
          <s-icon name="arrow" color="#aaa" size="24" custom-style="font-weight:600" />
        </view>
      </view>
    </view>
  </s-page>
</template>

<script>
import pagesJson from '@/pages.json';
export default {
  data() {
    return {
      list: pagesJson.subPackages.map(item => {
        item.pages = item.pages.filter(page => !page.hidden);
        return item;
      }),
    };
  },
  onShareAppMessage() {
    return {
      title: 's-ui-vue3 轻量、可靠的移动端 uni-app 组件库',
      path: '/pages/index/index',
      imageUrl: '/static/imgs/logo.png',
    };
  },
  methods: {
    jumpTo(url) {
      uni.navigateTo({ url });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f8fa;
}

.Index-Page {
  padding: calc(60rpx + var(--status-bar-height)) 30rpx 60rpx 30rpx;

  .header {
    display: flex;
    align-items: center;
    padding-left: 32rpx;

    .name {
      font-size: 64rpx;
      margin-left: 32rpx;
    }

    .version {
      margin-left: 30rpx;
    }
  }

  .desc {
    font-size: 26rpx;
    padding: 20rpx 0 30rpx 32rpx;
    color: $tips-color;
  }

  .nav {
    +.nav {
      margin-top: 20rpx;
    }

    &__title {
      font-size: 26rpx;
      padding: 28rpx 0 20rpx 32rpx;
      color: $tips-color;
    }

    &__block {
      font-size: 28rpx;
      font-weight: $font-weight-bold;
      position: relative;
      display: flex;
      align-items: center;
      height: 80rpx;
      padding: 0 20rpx 0 40rpx;
      transition: background .3s;
      color: $text-color;
      border-radius: $border-radius-max;
      background: #fff;

      +.nav__block {
        margin-top: 20rpx;
      }

      &__title {
        flex: 1 0 0;
      }
    }
  }
}
</style>
